<template>
  <div class="material-depot-page">
    <div class="right-opt">
      <el-button type="default" @click="toAdd">
        <i class="el-icon-circle-plus"></i> 新增</el-button>
    </div>
    <div class="e-table">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border>
        <el-table-column
          prop="name"
          label="材料库名称">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="toEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="toDel(scope.row)">删除</el-button>
            <el-button @click="toDetail(scope.row)" type="text">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <e-page :total="tableTotal" @handleCurrentChange="handleCurrentChange"></e-page> -->
    </div>

    <project-dialog ref="projectDialog" @handleSuccess="handleSuccess"></project-dialog>
    <material-dialog ref="materialDialog" @handleSuccess="handleSuccess"></material-dialog>
  </div>
</template>

<script>
import eDialog from '@/components/dialog';
import ePage from '@/components/pagination';
import projectDialog from './material-dialog';
import materialDialog from '@/pages/materialDepot/material-dialog';
import storage from '@/utils/storage';
import {getMaterial, delMaterialDepart} from '@/utils/api';

    export default {
        components: {eDialog, ePage, projectDialog, materialDialog},
        data() {
            return {
              loading: false,
              userValue: {},
              tableData: [],
              tableTotal: 0,
              page: {
                  pageIndex: 0,
                  pageSize: 10
              }
            }
        },
        created() {
          this.userValue = storage.getItem('user_value');
          if (this.userValue) {
            this.getList();
          } else {
            this.$router.push('/login');
          }
        },
        methods: {
            getList() {
              this.loading = true;
              const params = Object.assign({}, this.page, {adminId: this.userValue.id});
              getMaterial(params).then((res) => {
                this.loading = false;
                this.tableData = res;
              }).catch((err) => {
                this.loading = false;
              })
            },
            handleCurrentChange(val) {
                console.log(val)
                this.page.pageIndex = val - 1;
                this.getList();
            },
            toAdd() {
                console.log(this.$refs)
                this.$refs.materialDialog.openDialog();
            },

            toEdit(item) {
                this.$refs.projectDialog.openDialog(item);
            },
            handleSuccess() {
                this.getList();
            },
            toDel(item) {
                this.$confirm('确定要删除该材料库吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delMaterialDepart({id: item.id}).then((res) => {
                        this.getList();
                    })
                }).catch(() => {
                });
            },
            toDetail (item) {
              this.$router.push('/materialDepot/detail/' + item.id)
            }
        }
    }
</script>

<style lang="scss" scoped>
.material-depot-page {
  position: relative;
  .right-opt {
    position: absolute;
    right: 20px;
    top: -28px;
  }
}
</style>